//点击搜索按钮
$('button').on('click', function () {
     //清除表单中按钮的默认提交事件
     event.preventDefault()
})

//点击主菜单
$('#mianNav .navbar-nav>li').on('click', function () {
     //设置自身为选中状态并清除其他选项的选中状态
     $(this).addClass('mianActive').siblings().removeClass('mianActive')
})

// 显示当前登录者头像及工号
showHeadImgId()

// 头部退出按钮
$('#quit').find('button').click(function(){
     open('./login.html','_self')
})

//点击二级菜单
$('main .navbar-nav>li').on('click', function () {
     //设置自身为选中状态并清除其他选项的选中状态
     $(this).addClass('active').siblings().removeClass('active')
})

//判断当前登录者权限等级
Admin()

// 1.将数据动态渲染在页面上
let maxPage = 0                    //最大页
let nowPage = 1                    //当前页
let useData = getData('checkInOrder')
let JobIdVal                       //点击的该行删除按钮相对应的工号
// 数据分页
function showPage() {
     let pageLen = useData.length
     let countPage = Math.ceil(pageLen / 10)
     maxPage = countPage
     $('#page').html(`
     <li class="pageUp"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
               
     <li  id="lastLi" class="pageDown"><a href="#" aria-label="Previous"><span aria-hidden="true">&raquo;</span></a></li>
     `)
     for (let i = 1; i <= countPage; i++){
          $('#lastLi').before(`
          <li class="everyPage"><a href="#">${i} <span class="sr-only">(current)</span></a></li>
          `)
     }
}
showPage()

// 给每一页添加绑定事件
$('.pagination').on('click', '.everyPage', function () {
     everyPage($(this).text())
})
function everyPage(clickNum) {
     nowPage = parseInt(clickNum)
     let start = (nowPage - 1) * 10
     let end = start + 9
     if (nowPage === maxPage) {
          end = useData.length - 1
     }
     pageData(start, end)
     changeLi(nowPage - 1)
}
changeLi(0)
// 渲染页面数据
function pageData(start, end) {
     $('#tbodyContent').html('')
     for (let i = start; i <= end; i++) {
          let everyLiDate = `
               <tr class="headPic">
                    <td>${useData[i].orderNumber}</td>
                    <td>${useData[i].roomNumber}</td>
                    <td>${useData[i].checkInTime}</td>
                    <td>${useData[i].price}</td>
                    <td>${useData[i].cashPledge}</td>
                    <td>${useData[i].clientName}</td>
                    <td>${useData[i].orderState}</td>
                    <td>${useData[i].remarks}</td>
                    <td>${useData[i].inputter}</td>
                    <td>
                         <button class = "del" title="删除"><span class ="iconfont icon-ziyuanxhdpi "></span></button>
                    </td>
               </tr>
          `
          $('#tbodyContent').append(everyLiDate)
     }
}
pageData(0, 9)
//下一页
$('#page').on('click', '.pageDown', function () {
     if (nowPage < maxPage) {
          everyPage(++nowPage)
     }
})
// 上一页
$('#page').on('click', '.pageUp', function () {
     if (nowPage > 1) {
          everyPage(--nowPage)
     }
})
// 按钮变色
function changeLi(a) {
     for (let i = 0; i < $('.everyPage').length; i++) {
          $('.everyPage').eq(i).removeClass('active')
     }
     $('.everyPage').eq(a).addClass('active')
}
//删除订单信息
$('#tbodyContent').on('click', '.del', function () {
     let loginUser = Admin()
     if(loginUser == 0){
          JobIdVal = $(this).parents('tr').children('td').eq(0).text()
          $('.modal-content').html(`
               <div class="modal-header">
               <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                    aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">删除提示</h4>
               </div>
               <div class="modal-body">
                    确定要删除吗?
               </div>
               <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal" id ="delAffirm">确认</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal" id = "delCancel">取消</button>
               </div> 
          `)
          $('#myModal').modal('show')
     }
     else{
          $('.modal-content').html(`
          <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
               aria-hidden="true">&times;</span></button>
               <h4 class="modal-title" id="myModalLabel">提示</h4>
          </div>
          <div class="modal-body">
               你没有此权限！
          </div>
          <div class="modal-footer">
               <button type="button" class="btn btn-default" data-dismiss="modal">确认</button>
          </div> 
          `)
          $('#myModal').modal('show')
     } 
})
// 确认删除订单信息
$('.modal-content').on('click', '#delAffirm', function () {
     for (let i = 0; i < useData.length; i++) {
          if (JobIdVal == useData[i].orderNumber) {
               useData.splice(i, 1)
          }
     }
     saveData('checkInOrder', useData);
     everyPage(nowPage)
     showPage()
     $('.modal-content').html(`
          <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
               aria-hidden="true">&times;</span></button>
               <h4 class="modal-title" id="myModalLabel">删除提示</h4>
          </div>
          <div class="modal-body">
               删除成功！
          </div>
          <div class="modal-footer">
               <button type="button" class="btn btn-default" data-dismiss="modal">确认</button>
          </div> 
     `)
     $('#myModal').modal('show')
})

//查询订单信息
//1.获取搜索框里面的值
//2.根据搜索框里面的值与数据库进行比较
//3.把符合的值显示在表格里
let searchType = 'option1'
let searchArr= []
let searchNowPage
let searchMaxPage
//根据不同选项类型，显示不同提示词
$('#typeOption').click(function (){
     searchType = $(this).val()
     if($(this).val() =='option1'){
          $('#OptionType').attr('placeholder','请输入客人姓名')
     }
     else if($(this).val() =='option2'){
          $('#OptionType').attr('placeholder','请输入房间号')
     }
     else{
          $('#OptionType').attr('placeholder','请输入入住日期')
     }
})
// 根据内容分页
 function searchShowPage(){
     let pageLen = searchArr.length
     let countPage = Math.ceil(pageLen / 10)
     searchMaxPage = countPage
     $('#page').html(`
     <li class="pageUp"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
               
     <li  id="lastLi" class="pageDown"><a href="#" aria-label="Previous"><span aria-hidden="true">&raquo;</span></a></li>
     `)
     for (let i = 1; i <= countPage; i++){
          $('#lastLi').before(`
          <li class="everyPage1"><a href="#">${i} <span class="sr-only">(current)</span></a></li>
          `)
     }
}
// 点击每个按钮
$('.pagination').on('click', '.everyPage1', function () {
     searchEveryPage($(this).text())
})
// 页面应该渲染多少条数据
function searchEveryPage(clickNum) {
     searchNowPage = parseInt(clickNum)
     let start = (searchNowPage - 1) * 10
     let end = start + 9
     if (searchNowPage == searchMaxPage) {
          end = searchArr.length - 1
     }
     searchPageData(start, end)
     changeLi(searchNowPage - 1)
}
changeLi(0)
// 按钮变色
function changeLi1(a) {
     for (let i = 0; i < $('.everyPage1').length; i++) {
          $('.everyPage1').eq(i).removeClass('active')
     }
     $('.everyPage1').eq(a).addClass('active')
}
// 渲染每页数据
function searchPageData(start, end) {
     $('#tbodyContent').html('')
     for (let i = start; i <= end; i++) {
          let everyLiDate = `
               <tr class="headPic">
                    <td>${searchArr[i].orderNumber}</td>
                    <td>${searchArr[i].roomNumber}</td>
                    <td>${searchArr[i].checkInTime}</td>
                    <td>${searchArr[i].price}</td>
                    <td>${searchArr[i].cashPledge}</td>
                    <td>${searchArr[i].clientName}</td>
                    <td>${searchArr[i].orderState}</td>
                    <td>${searchArr[i].remarks}</td>
                    <td>${searchArr[i].inputter}</td>
                    <td>
                         <button class = "del" title="删除"><span class ="iconfont icon-ziyuanxhdpi "></span></button>
                    </td>
               </tr>
          `
          $('#tbodyContent').append(everyLiDate)
     }
}
$('#search').click(function (){
     //获取输入框的值
     let inputVal = $('#OptionType').val()
     // 判断多选框的值
     if(searchType =='option1'){ 
          let state = false
          searchArr = []
          for(let i=0;i<useData.length;i++){
               if(useData[i].clientName == inputVal){
                    state = true
                    searchArr.push(useData[i])
               }
          }
          searchShowPage()
          if(searchArr.length >= 1){
               let start = 0
               let end = start + 9
               if (1 == searchMaxPage) {
                    end = searchArr.length - 1
               }
               searchPageData(0, end)
          }
          if(state === false ){
               $('.modal-content').html(`
               <div class="modal-header">
               <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                    aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">搜索提示</h4>
               </div>
               <div class="modal-body">
                    没有该客人姓名，请重新输入！
               </div>
               <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">确认</button>
               </div> 
               `)
          $('#myModal').modal('show')
          }
     }
     else if(searchType =='option2'){
          let state1 = false
          searchArr = []
          // 把符合条件的数据装进数组
          for(let i=0;i<useData.length;i++){
               if(useData[i].roomNumber == inputVal){
                    state1 = true
                    searchArr.push(useData[i])   
               }
          }   
          searchShowPage()
          if(searchArr.length >= 1){
               let start = 0
               let end = start + 9
               if (1 == searchMaxPage) {
                    end = searchArr.length - 1
               }
               searchPageData(0, end)
          }
          if(state1 === false ){
               $('.modal-content').html(`
               <div class="modal-header">
               <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                    aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">搜索提示</h4>
               </div>
               <div class="modal-body">
                    没有该房间号，请重新输入！
               </div>
               <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">确认</button>
               </div> 
               `)
          $('#myModal').modal('show')
          }
     }
     else{
          let state2 = false 
          searchArr = []
          // 把符合条件的数据装进数组
          for(let i=0;i<useData.length;i++){
               if(useData[i].checkInTime == inputVal){
                    state2 = true
                    //渲染符合条件的数据
                    searchArr.push(useData[i])   
               }
          }
          searchShowPage()
          if(searchArr.length >= 1){
               let start = 0
               let end = start + 9
               if (1 == searchMaxPage) {
                    end = searchArr.length - 1
               }
               searchPageData(0, end)
          }
          if(state2 === false ){
               $('.modal-content').html(`
               <div class="modal-header">
               <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                    aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">搜索提示</h4>
               </div>
               <div class="modal-body">
                    没有该入住时间，请重新输入！
               </div>
               <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">确认</button>
               </div> 
               `)
          $('#myModal').modal('show')
          }
     }
     changeLi1(0)
})
//查看全部订单信息
$('.allStaff').click(function(){
     showPage()
     pageData(0, 9)
     $('.pagination').on('click', '.everyPage', function () {
          everyPage($(this).text())
     })
     changeLi(0)
})